<template>
  <div>
    <el-dialog title="修改订单" :visible.sync="showEditOrderDialog" center width="770px">
      <el-form :model="orderData" :rules="rules" ref="orderData">

        <el-form-item label="所属用户" :label-width="formLabelWidth">
          <el-select v-model="orderData.customer_id" filterable placeholder="请选择">
            <el-option
              v-for="item in customerList"
              :key="item.customer_id"
              :label="item.nickname"
              :value="item.customer_id">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="用户手机号" :label-width="formLabelWidth">
          <el-input v-model="orderData.customer_telephone" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="订单总价格" :label-width="formLabelWidth">
          <el-input v-model="orderData.total" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="订单减免金额" :label-width="formLabelWidth">
          <el-input v-model="orderData.discount_amount" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="订单实际付款金额" :label-width="formLabelWidth">
          <el-input v-model="orderData.actual_total" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="支付状态" :label-width="formLabelWidth">
          <el-radio v-model="orderData.pay_status" :label="'0'">未支付</el-radio>
          <el-radio v-model="orderData.pay_status" :label="'1'">已支付</el-radio>
        </el-form-item>


        <el-form-item label="订单退款状态" :label-width="formLabelWidth">
          <el-radio v-model="orderData.refund_status" :label="'0'">未退款</el-radio>
          <el-radio v-model="orderData.refund_status" :label="'1'">已退款</el-radio>
        </el-form-item>

        <el-form-item label="订单状态" :label-width="formLabelWidth">
          <el-radio v-model="orderData.status" :label="'0'">失败</el-radio>
          <el-radio v-model="orderData.status" :label="'1'">进行中</el-radio>
          <el-radio v-model="orderData.status" :label="'2'">已完成</el-radio>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelSubmit">取 消</el-button>
        <el-button type="primary" @click="submitCustomer('orderData')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import store from '@/store'
  import {edit} from '@/api/thk/order'


  export default {
    name: 'editOrder',
    data() {
      return {
        showEditOrderDialog: false,
        formLabelWidth: '130px',

        orderData: {

          /**
           order_id
           customer_id
           customer_telephone 13232634775
           total
           pay_status
           discount_amount
           refund_status
           actual_total
           */

          order_id: '',
          customer_id: '',
          customer_telephone: '',
          total: '',
          pay_status: '',
          status: '',
          discount_amount: '',
          refund_status: '',
          actual_total: '',
        },

        customerList: [],

        rules: {
          // 问题为必填字段
          nickname:[
            { required: true, message: '昵称为必填项', trigger: 'blur' },
          ],
        }
      }
    },


    methods: {
      // 判断是否点击了提交
      submitCustomer(orderData){
        this.$refs[orderData].validate((valid) => {
          if (valid) {
            edit(store.getters.token,this.orderData).then(result => {
              this.showEditOrderDialog = !this.showEditOrderDialog
              this.$message.success("修改成功!")
              this.$parent.getOrderList()
            }).catch(error => {
              this.$message("修改失败!")
              console.log(error)
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });

      },




      // 显示dialog,并将数据回显
      showEditDialog(row, customerList){
        this.orderData.order_id = row.order_id
        this.orderData.customer_id = row.customer_id
        this.orderData.customer_telephone = row.customer_telephone
        this.orderData.total = row.total                // 订单总价格
        this.orderData.pay_status = row.pay_status+''      // 支付状态，0未支付，1已支付
        this.orderData.status = row.status+''                // 订单状态 ，0无效, 1有效\
        this.orderData.refund_status = row.refund_status+''
        this.orderData.discount_amount = row.discount_amount
        this.orderData.actual_total = row.actual_total
        this.customerList = row.customerList

        this.showEditOrderDialog = !this.showEditOrderDialog
      },

      cancelSubmit(){
        this.showEditOrderDialog = !this.showEditOrderDialog
      },
    }
  }
</script>





